<template>
  <div id="header">
    <div class="actionBox">
      <a-button @click="zoomIn" size="small">
        <a title="放大">
          <a-icon type="zoom-in" />
        </a>
      </a-button>
      <a-button @click="zoomOut" size="small">
        <a title="缩小">
          <a-icon type="zoom-out" />
        </a>
      </a-button>
      <a-button @click="toCenter" size="small">
        <a title="居中">
          <a-icon type="pic-center" />
        </a>
      </a-button>
      <a-button
        @click="handleHistory('undo')"
        :disabled="btnStatus.undo"
        size="small"
      >
        <a title="上一步">
          <a-icon type="undo" />
        </a>
      </a-button>
      <a-button
        @click="handleHistory('redo')"
        :disabled="btnStatus.redo"
        size="small"
      >
        <a title="下一步">
          <a-icon type="redo" />
        </a>
      </a-button>
      <a-button
        :disabled="btnStatus.del"
        @click="handleDelete"
        type="danger"
        size="small"
      >
        <a title="删除"><a-icon type="delete" theme="filled" /></a>
      </a-button>
      <a-button
        @click="setzIndex('toFront')"
        :disabled="btnStatus.toFront"
        size="small"
      >
        <a title="移至最前">
          <a-icon :component="topmostSvg" />
        </a>
      </a-button>
      <a-button
        @click="setzIndex('toBack')"
        :disabled="btnStatus.toBack"
        size="small"
      >
        <a title="移至最后">
          <a-icon :component="lowestSvg" />
        </a>
      </a-button>
      <a-popover
        overlayClassName="header_colorPicker"
        :visible="promptVisible"
        @visibleChange="showPrompt"
        title="选择颜色"
        trigger="click"
      >
        <template slot="content">
          <div class="colorBox">
            <div
              v-for="(item, index) in colorList"
              :key="index"
              class="colorItem"
              :style="{ backgroundColor: item }"
              @click="colorConfirm(item)"
            ></div>
          </div>
        </template>
        <a-button :disabled="btnStatus.colorPicke" size="small">
          <a title="设置填充色">
            <a-icon type="bg-colors" />
          </a>
        </a-button>
      </a-popover>

      <a-button size="small">打开 </a-button>
      <a-button @click="Export" size="small">导出 </a-button>

      <a-popover placement="bottomLeft">
        <template slot="content">
          <div class="tipsBox">
            <a-row v-for="item in tipsContent" :key="item.keydown">
              <div class="text-center no-user-select">
                <a-col class="mt-10" :span="12">
                  <span class="keyDown">{{ item.keyDown }}</span>
                </a-col>
                <a-col class="mt-10 text-right" :span="12">
                  <span class="lable">{{ item.lable }}</span>
                </a-col>
              </div>
            </a-row>
          </div>
        </template>

        <a-button size="small">
          <a title="提示">
            <a-icon type="question-circle" />
          </a>
        </a-button>
      </a-popover>
    </div>
    <!--分割线-->
    <span class="span"></span>
    <a @click="save" v-if="btnStatus.needSave" class="geItem geStatus">
      <div
        class="geStatusAlert"
        title="修改未保存。点击此处保存。"
        data-action="saveAs"
      >
        修改未保存。点击此处保存。
        <img
          src=""
          class="geAdaptiveAsset"
        />
      </div>
    </a>
  </div>
</template>
<script>
import lowestSvg from "../content/iconComponent/lowestSvg";
import topmostSvg from "../content/iconComponent/topmostSvg";
export default {
  name: "Header",
  data() {
    return {
      lowestSvg,
      topmostSvg,
      btnStatus: {
        del: true,
        undo: true,
        redo: true,
        colorPicke: true,
        toFront: true,
        toBack: true,
        needSave: false,
      },
      delStatus: true,
      cell: null,
      view: null,
      type: null,
      promptVisible: false, // 颜色选择框
      colorList: [
        "#000000",
        "#ffffff",
        "#818181",
        "#CC0033",
        "#02F905",
        "#005EA3",
      ],
      tipsContent: [
        {
          keyDown: "Ctrl+c",
          lable: "单元复制",
        },
        {
          keyDown: "Ctrl+v",
          lable: "单元粘贴",
        },
        {
          keyDown: "Delete",
          lable: "单元删除",
        },
        {
          keyDown: "Ctrl+leftMouseDown",
          lable: "选中边后,添加操作点(双击删除)",
        },
      ],
    };
  },
  methods: {
    init(cell, view, type) {
      this.resetStatus();
      this.cell = cell;
      this.view = view;
      this.type = type;
      if (cell && view) {
        if (cell.length > 1) {
          // 多选
          this.setbtnStatus(true, "colorPicke");
          this.setbtnStatus(true, "toFront");
          this.setbtnStatus(true, "toBack");
        } else if (cell.length === 1) {
          // 单选
          try {
            if (cell[0].isNode()) {
              let data = cell[0].getData();
              if ("describe" in data) {
                this.setbtnStatus(true, "colorPicke");
                this.setbtnStatus(true, "toFront");
                this.setbtnStatus(true, "toBack");
              } else {
                this.setbtnStatus(false, "colorPicke");
                this.setbtnStatus(false, "toFront");
                this.setbtnStatus(false, "toBack");
              }
            } else if (cell[0].isEdge()) {
              this.setbtnStatus(false, "toFront");
              this.setbtnStatus(false, "toBack");
              // this.setbtnStatus(false, "colorPicke");
            }
          } catch (err) {
            console.log(err);
          }
        }
        // 不管单选多选都应该存在的操作
        this.setbtnStatus(false, "del"); // 设置删除按钮状态可删除
      } else {
        // 这里就是点击空白处的情况
        this.setbtnStatus(true, "del"); // 设置删除按钮状态不可删除
        this.setbtnStatus(true, "colorPicke");
        this.setbtnStatus(true, "toFront");
        this.setbtnStatus(true, "toBack");
      }
    },
    showPrompt(e) {
      this.promptVisible = e;
      if (this.btnStatus.colorPicke) {
        // return;
        this.promptVisible = false;
      }
    },
    resetStatus() {
      this.cell = null;
      this.view = null;
      this.type = null;
      this.resetBtnStatus();
    },
    resetBtnStatus() {
      // 重置按钮状态
      this.btnStatus.del = true;
      this.btnStatus.colorPicke = true;
      this.btnStatus.toFront = true;
      this.btnStatus.toBack = true;
    },
    setbtnStatus(status, type) {
      this.btnStatus[type] = status;
    },
    // 按钮操作
    handleDelete() {
      this.$emit("handle", "delete");
    },
    handleHistory(type) {
      this.$emit("handle", "history", type);
    },
    Export() {
      this.$emit("handle", "export");
    },
    setzIndex(type) {
      this.$emit("handle", "setzIndex", type);
    },
    zoomIn() {
      this.$emit("handle", "zoomIn");
    },
    zoomOut() {
      this.$emit("handle", "zoomOut");
    },
    toCenter() {
      this.$emit("handle", "toCenter");
    },
    save() {
      this.$emit("handle", "save");
    },
    colorConfirm(color) {
      this.promptVisible = false;
      this.$emit("handle", "colorPick", color);
    },
  },
};
</script>
<style lang="less" scoped>
#header {
  width: 100%;
  height: 35px;
  background-color: #f2f6fc;
  // box-shadow: inset 8px 7px 30px -15px #000000;
  border-bottom: 1px solid #e0c7ff;
  text-align: center;
  line-height: 30px;
  display: flex;
  align-items: center;
  .actionBox {
    height: 100%;
    width: 45%;
    justify-content: space-around;
    align-items: center;
    display: flex;
  }
  .span {
    width: 1px;
    height: 20px;
    background: #e5e5e5;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 4px;
  }
  .geItem {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .geStatusAlert {
    font-size: 14px;
    line-height: 21px;
    padding: 0 5px;
    background-color: #eacccc;
    border: 1px solid #dca4ad;
    color: #b62623 !important;
    border-radius: 5px;
    box-sizing: border-box;
  }
}
</style>
<style lang="less">
.header_colorPicker {
  .colorBox {
    width: 100%;
    height: 40px;
    display: flex;

    .colorItem {
      width: 20px;
      height: 20px;
      margin: 5px;
      cursor: pointer;
      box-sizing: border-box;
      border-radius: 3px;
      border: 1px solid #ccc;
      transition: transform 0.2s;
    }
    .colorItem:hover {
      transform: scale(1.1);
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
    }
  }
}
.tipsBox {
  width: 400px;
  .keyDown {
    padding: 1px 5px;
    background-color: #5f5f61;
    border-radius: 3px;
    color: #fff;
  }
  .lable {
    text-align: right;
  }
}
.text-center {
  display: flex;
  // justify-content: center;
  align-items: center;
}
.mt-10 {
  margin-top: 5px;
}
.no-user-select {
  user-select: none;
}
.text-right {
  text-align: right;
}
</style>
